<template>
  <view class="loginPage">
    <view class="content header">
      <image class="logo" src="../../static/logo.png"/>
      <view>
        <text class="title">蓝界航标</text>
      </view>
    </view>
    <view class="content container">
      <uni-card class="card">
        <form @submit="formSubmit">
          <view class="item">
            <view class="title">账 户：</view>
            <input class="uni-input" name="userAccount" v-model="form.userAccount" placeholder="请输入用户名"/>
          </view>
          <view class="item">
            <view class="title">密 码：</view>
            <input type="password" class="uni-input" name="userPassword" v-model="form.userPassword"
                   placeholder="请输入密码"/>
          </view>
          <view class="uni-btn-v item">
            <button type="warn" form-type="submit">登录</button>
            <button type="primary" @click="backHandle">返回</button>
          </view>
        </form>
      </uni-card>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {LOGIN_EVENT, USER_TOKEN_KEY} from "@/constants/sysConstants";
import {ref} from "vue";
import {userLoginUsingPost} from "@/services/api/sysUserController";

const form = ref<API.SysUserLoginRequest>({
  userAccount: 'admin',
  userPassword: '12345678'
});

const formSubmit = async () => {
  const data = await userLoginUsingPost(form.value) as API.SysUser;
  if (data === null) {
    uni.showToast({
      icon: "none",
      title: "登录失败",
      duration: 2000
    });
  } else {
    uni.setStorageSync(USER_TOKEN_KEY, data);
    backHandle();
  }
}

const backHandle = () => {
  //触发事件
  uni.$emit(LOGIN_EVENT)
  uni.navigateBack({
    delta: 1
  });
}

</script>

<style scoped>
html, body, .app {
  height: 100vh;
  overflow: hidden; /* 隐藏滚动条 */
}

.loginPage {
  height: 100vh;
  background: linear-gradient(to right, #ebf1fd, #ffffff);
  padding: 1px 0; /* 底部内边距 */
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .card {
    background: linear-gradient(to right, #ebf1fd, #ffffff);
  }

}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.header {
  margin-top: -50px;
}

.container {
  //margin-top: 10rch;
}

.container .item {
  margin: 15px 0 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .title {
    color: #171212;
    font-size: 16px;
    margin: 5px 0;
  }
}


.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.uni-form-item .title {
  padding: 20rpx 0;
}

</style>
